<template>
    <div class="search">
       <div class="search_input">
          <input type="text" placeholder="搜索..." v-model="s"  />
         <img src="../assets/imges/search.jpg" v-on:keyup.13="get_search" @click="get_search"  />
       </div>
       <div class="history">
            <span>历史搜索</span>
            <img src="../assets/imges/del.png" @click="empty" alt="清空历史记录" />
             <ul>
               <li v-for="(item,index) in historyList" :key="index" @click="goSearchDetail(item)">{{item}}</li>
            </ul>
         </div>
       <div class="search_content">
           <div class="content">
             <div class="header">
                <span>8 / 1 - 8</span>
                <span>最相关</span>
             </div>
             <div class="body" v-for="{title,lujing,date,cid} in data" :key="cid" >
              <img src="../assets/imges/10.jpg">
              <div>
                <span class="first">{{title}}</span>
                <span class="second">{{lujing}}</span>
                <span class="third">{{date}}</span>
              </div>
             </div>
           </div>
       </div>
    </div>
</template>

<script>
    export default {

       data() {
         return {
            s: '' , //搜索的内容
            historyList:[] ,//历史搜索记录 存本地
           data:[
            {cid:1,
            title:'NVIDIA - 驱动下载',
             lujing:'Download International drivers for NVIDIA hardware (geforce, quadro, tesla, nforce)',
             date:'September 2022 | www.nvidia.cn/content/DriverDownload-March2009/confirmation.php?lang=cn&type=Quadro&url=/solaris/384.111/NVIDIA-So'
            },
             {cid:2,
               title:'比较 GeForce 系列最新一代显卡和前代显卡 | NVIDIA',
             lujing:'Download International drivers for NVIDIA hardware (geforce, quadro, tesla, nforce)',
             date:'September 2022 | www.nvidia.cn/content/DriverDownload-March2009/confirmation.php?lang=cn&type=Quadro&url=/solaris/384.111/NVIDIA-So'
            },
             {cid:3,
               title:'Tesla V100 PCIe Product Brief',
             lujing:'Download International drivers for NVIDIA hardware (geforce, quadro, tesla, nforce)',
             date:'September 2022 | www.nvidia.cn/content/DriverDownload-March2009/confirmation.php?lang=cn&type=Quadro&url=/solaris/384.111/NVIDIA-So'
            }
            ]
         }
       },
       mounted () {
         console.log('==>',this.$route.query.data);
         this.s=this.$route.query.data
         this.historyList = JSON.parse(localStorage.getItem('historyList'))
        
       },
       methods: {
           get_search(){
        	if(this.s == ''){
        		return false;
        	}else{
                // 没有搜索记录，把搜索值push进数组首位，存入本地
                if (!this.historyList.includes(this.s)) {
                  this.historyList.unshift(this.s);
                  localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }else{
                    //有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
                    let i =this.historyList.indexOf(this.s);
                    this.historyList.splice(i,1)
                    this.historyList.unshift(this.s);
                    localStorage.setItem("historyList", JSON.stringify(this.historyList));
                }
                //跳转到搜索结果页
        		// this.$router.push({
        		// 	path: "/searchIndex", 
        		// 	query: { 
        		// 		search_val: this.s,
        		// 	},
        		// });
                    const url = "search?value=" + this.s;
          this.axios.get(url).then((res) => {
            console.log(res);
            this.data = res.data.result;
            console.log(this.data)
            });
        	}
        },
          //点击历史搜索，跳转搜索结果页
      //   goSearchDetail(title){
      //   	this.$router.push({
      //   		path: "/list", 
      //   		query: { 
      //   			search_val: title,
      //   		},
      //   	});
      //   },
         //清空历史搜索记录
        empty(){
            localStorage.removeItem('historyList');
            this.historyList = [];
        },

       



       },


    }
</script>

<style lang="scss" scoped>
    .search {
            // height: 500px;
            // background-color: skyblue;
            margin-top: 51px;
            .search_input {
                box-sizing: border-box;
                height: 100px;
                padding-top: 30px ;
                background-color: #EEEEEE;
               
                // display: flex;

                input {
                     position: relative;
                    display: block;
                    margin: auto;
                    width: 550px;
                    border: 2px solid #999;
                    padding: 18px;
                    
                    
                 &::-webkit-input-placeholder {
                   color: #C8C8C8;
                   font-size: 16px;
                }
                  &:focus {
                   outline: 0;
                   border-color: #76B900;
                }
                }
               
               img {
                position: absolute;
                left: 1200px;
                top: 98px;
                 
                 &:hover {
                    cursor: pointer;
                 }
                
               }
            }

          .history {
            background-color: #EEEEEE;
            height: 50px;

            span {
               margin-left: 660px;
               font-size: 14px;
               vertical-align: 10px;
               color: #C8C8C8;
            }
            img {
               margin-left: 490px;
               width: 25px;
               vertical-align: 5px;
               background-color: #EEEEEE;
            }
          } 
        ul {
          margin-left: 660px;
          display: flex;
          li{
            list-style: none;
           font-size: 12px;
           color: #C8C8C8;
           margin-left: 10px;
           cursor: pointer;
          }
          
        }
       
        .search_content {
          .content {
            width: 1300px;
            // background-color: #ccc;
            margin: 0 auto;
            .header {
               margin: 20px 0;
               border-bottom: 1px solid #ccc;
               display: flex;
               flex-direction: row;
               justify-content: space-between;
               font-weight: bold;
               padding-bottom: 10px;
            }
           .body {
               display: flex;
               flex-direction: row;
               height: 110px;
               align-items: center; 
               img {
                width: 100px;
                height: 100px;
                // vertical-align: center;
                margin-right: 30px;
               }
               div {
                display: flex;
                flex-direction: column;
                flex: 1;
                justify-content: space-evenly;
              .first {
               font-size: 26px;
               color: #76B900;
               font-weight: bold;
              }
              .second {
               font-size: 18px;
               color: #666;
              }
             .third {
               font-size: 12px;
               color: #9FA19F;
             }
             }
            }
          }

        }
           
        }
</style>